<template>
  <n-card :bordered="false" class="setting-container tab-card">
    <n-tabs type="line" animated>
      <n-tab-pane name="basic-set" tab="基本设置">
        <n-form size="large" label-placement="left" label-align="right" :label-width="96">
          <n-h2>个人设置</n-h2>
          <n-form-item label="用户名">
            <n-input placeholder="请输入用户名"></n-input>
          </n-form-item>
          <n-form-item label="手机号码">
            <n-input placeholder="请输入您的手机号"></n-input>
          </n-form-item>
          <n-form-item label="修改密码">
            <n-input placeholder="请输入您的密码"></n-input>
          </n-form-item>
          <n-form-item label="邮箱">
            <n-input placeholder="请输入您的邮箱，方便将连接状态实时通知到您"></n-input>
          </n-form-item>
          <n-h2 class="mt-4 mb-6">站点设置</n-h2>
          <n-form-item label="站点标题">
            <n-input placeholder="请输入站点标题"></n-input>
          </n-form-item>
          <n-form-item label="站点副标题">
            <n-input placeholder="请输入站点副标题"></n-input>
          </n-form-item>
          <n-form-item label="站点关键字">
            <n-input placeholder="请输入站点关键字"></n-input>
          </n-form-item>
          <n-form-item label="站点描述">
            <n-input placeholder="请输入站点描述"></n-input>
          </n-form-item>
          <n-form-item label="站点地址">
            <n-input placeholder="请输入站点地址"></n-input>
          </n-form-item>
          <n-form-item label="监控密钥">
            <n-input placeholder="请输入监控密钥"></n-input>
          </n-form-item>
          <n-form-item label="通信密钥">
            <n-input placeholder="请输入通信密钥"></n-input>
          </n-form-item>
          <n-form-item label=" ">
            <n-button type="primary">保存</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="advanced-set" tab="高级设置">
        <n-form size="large" label-placement="left" label-align="right" :label-width="120">
          <n-form-item label="屏蔽腾讯检测">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="防CC攻击模块">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="首页显示开关">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="接口首页开关">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item>
            <template #label>
              API生成域名
            </template>
            <n-input placeholder="多域名用｜分割，留空代表无限制"></n-input>
          </n-form-item>
          <n-form-item>
            <template #label>
              接口限制域名
            </template>
            <n-input placeholder="多域名用｜分割，留空代表无限制"></n-input>
          </n-form-item>
          <n-form-item label="QQ屏蔽举报">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="QQ高防举报">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="微信屏蔽举报">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label="访问记录功能">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item label=" ">
            <n-button type="primary">保存</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>
      <n-tab-pane name="generate-set" tab="生成设置">
        <n-space class="pb-8" :size="[16,0]">
          <n-button class="w-40" size="large" :type="generate.tabValue===item.key ? 'primary' : 'tertiary'" round
                    :ghost="generate.tabValue===item.key" v-for="item in unref(generate.buttonList)" :key="item.key"
                    @click="generate.tabValue=item.key">
            {{ item.text }}
          </n-button>
        </n-space>
        <n-form size="large" label-placement="left" label-align="right" :label-width="120"
                v-if="generate.tabValue==='base'">
          <n-form-item label="自动拉黑阀值">
            <n-input placeholder="自定义设置"></n-input>
          </n-form-item>
          <n-form-item label="伪静态开关">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-alert :show-icon="false" type="info">
            NGINX下载伪静态规则：在“安装说明.txt”文件内
          </n-alert>
          <n-form-item label="缩短网址接口">
            <n-input placeholder="下面有截图示例"></n-input>
          </n-form-item>
          <n-alert :show-icon="false" type="info">
            NGINX下载伪静态规则：在“安装说明.txt”文件内
          </n-alert>
          <n-form-item label="默认域名链接">
            <n-input placeholder="完整路径，不开启留空"></n-input>
          </n-form-item>
          <n-form-item label="接口使用顺序">
            <n-input placeholder="默认为0"></n-input>
          </n-form-item>
          <n-form-item label="伪造二级目录">
            <n-input placeholder="请选择目录"></n-input>
          </n-form-item>
          <n-form-item label="跳转文件名称">
            <n-input placeholder="自定义设置"></n-input>
          </n-form-item>
          <n-form-item label="跳转后缀伪装">
            <n-input placeholder="自定义设置"></n-input>
          </n-form-item>
          <n-alert :show-icon="false" type="info">
            NGINX下载伪静态规则：在“安装说明.txt”文件内
          </n-alert>
          <n-form-item label=" ">
            <n-button type="primary">保存</n-button>
          </n-form-item>
        </n-form>
        <n-grid x-gap="24" :cols="3" v-if="generate.tabValue==='service'">
          <n-gi>
            <n-card size="large" :bordered="false" title="尤启梦短网址">
              <n-p>
                Token：
                <n-a type="primary">获取密钥</n-a>
              </n-p>
              <n-input size="large" placeholder="请输入密钥"></n-input>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card size="large" :bordered="false" title="suolm短网址">
              <n-p>
                Token：
                <n-a type="primary">获取密钥</n-a>
              </n-p>
              <n-input size="large" placeholder="请输入密钥"></n-input>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card size="large" :bordered="false" title="Nrwso短网址">
              <n-p>
                Token：
                <n-a type="primary">获取密钥</n-a>
              </n-p>
              <n-input size="large" placeholder="请输入密钥"></n-input>
            </n-card>
          </n-gi>
        </n-grid>
        <n-space :size="[0,32]" vertical v-if="generate.tabValue==='custom'">
          <n-button size="large" type="primary">
            <template #icon>
              <img :src="`${mainStore.commonImagePath}/link_union_btn.svg`" alt="link_union_btn">
            </template>
            添加域名
          </n-button>
          <n-data-table :bordered="false" :columns="unref(addDomainTable.columns)" :data="addDomainTable.dataList"
                        :pagination="addDomainTable.dataList.length > 0 && unref(mainStore.pagination)"
                        :row-key="row => row.id" flex-height size="large" @update:checked-row-keys="handleCheck">
            <template #empty>
              <n-space align="center" justify="center" vertical>
                <img :src="`${mainStore.commonImagePath}/empty_bg.svg`" alt="empty_bg">
                <n-text class="text-[#96A0B1]">暂无数据</n-text>
              </n-space>
            </template>
          </n-data-table>
        </n-space>
      </n-tab-pane>
      <n-tab-pane name="jump-set" tab="跳转设置">
        <n-form size="large" label-placement="left" label-align="right" :label-width="120">
          <n-form-item label="跳转页加密">
            <n-input placeholder="请选择跳专页加密"></n-input>
          </n-form-item>
          <n-form-item label="模拟举报功能">
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item>
            <template #label>
              举报后禁访问
            </template>
            <n-button-group>
              <n-button size="large" ghost>开启</n-button>
              <n-button size="large" ghost>关闭</n-button>
            </n-button-group>
          </n-form-item>
          <n-form-item>
            <template #label>
              微信跳转接口
            </template>
            <n-input placeholder="多域名用｜分割，留空代表无限制"></n-input>
          </n-form-item>
          <n-form-item label="API生成域名">
            <n-input placeholder="默认为0"></n-input>
          </n-form-item>
          <n-form-item label=" ">
            <n-button type="primary">保存</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup>
import {h, reactive, ref, unref} from 'vue'
import {useRouter} from 'vue-router'
import {NButton, NEllipsis, NInput, NSpace, NTag, NText} from 'naive-ui'
import {useMainStore} from '@/store'

const router = useRouter()
const mainStore = useMainStore()

const generate = reactive({
  tabValue: 'base',
  buttonList: [
    {
      text: '基础设置',
      key: 'base'
    },
    {
      text: '短链服务商',
      key: 'service'
    },
    {
      text: '短链自定义',
      key: 'custom'
    }
  ]
})

const addDomainTable = reactive({
  columns: [
    {type: 'selection', fixed: 'left'},
    {
      title: '域名', key: 'url', fixed: 'left',
      render(row) {
        return h('div', {}, {
          default: () => [
            h(NEllipsis, {
              class: 'text-[rgba(0,0,0,0.9)]'
            }, {default: () => row.url})
          ]
        })
      }
    },
    {
      title: '备注', key: 'remarks',
      render(row) {
        return h(NInput, {
          placeholder: '请输入备注',
          bordered: false,
        })
      }
    },
    {
      title: '状态', key: 'type',
      render(row) {
        return h(NTag, {
          type: row.type === 0 ? 'success' : 'error',
          size: 'large',
          bordered: false,
          class: 'px-6 rounded'
        }, {default: () => row.type === 0 ? '已生效' : '未生效'})
      }
    },
    {
      title: '添加时间', key: 'create_time',
      render(row) {
        return h(NText, {
          strong: true,
          class: 'text-base text-[rgba(0,0,0,0.9)]'
        }, {default: () => row.create_time})
      }
    },
    {
      title: '操作', fixed: 'right', width: 140,
      render(row) {
        return h(NSpace, {}, {
          default: () => [
            h(NButton, {
              text: true,
              disabled: addDomainTable.disabledBtn,
              title: '删除',
              onclick() {
              }
            }, {
              default: () => h('img', {
                src: `${mainStore.commonImagePath}/link_delete_normal.svg`,
                alt: 'link_delete_normal',
              })
            })
          ]
        })
      }
    },
  ],
  dataList: [
    {
      id: 1,
      url: 'https://www.bilibili.com',
      remarks: '',
      type: 0,
      visit_num: 413,
      visit_people: 320,
      ip_num: 298,
      create_time: '2022-03-29 09:41:04'
    },
    {
      id: 2,
      url: 'https://www.baidu.com',
      remarks: '',
      type: 1,
      visit_num: 413,
      visit_people: 320,
      ip_num: 298,
      create_time: '2022-03-29 09:41:04'
    }
  ],
  checkedRowKeys: [],
  disabledBtn: false
})

const handleCheck = rowKeys => {
  addDomainTable.disabledBtn = rowKeys.length > 0
  addDomainTable.checkedRowKeys = rowKeys
}
</script>

<style lang="less" scoped>
.setting-container {
  min-height: calc(100vh - 112px);

  &:deep(.n-card__content) {
    .n-tabs--line-type {
      .n-tabs-pane-wrapper {
        .n-tab-pane {
          padding-top: 30px;

          .n-grid {
            .n-card {
              background-color: #F7F9FF;

              .n-card-header {
                padding-bottom: 8px;

                .n-card-header__main {
                  font-size: 20px;
                  color: rgba(0, 0, 0, 0.9);
                }
              }

              .n-card__content {
                padding: 0 32px 80px!important;
              }
            }
          }
        }
      }
    }
  }
}
</style>
